.order-list {
	min-height: 100vh;
	background-color: $mall-bg-100;
	
	.custom-navbar {
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		border-bottom: 1rpx solid $mall-bg-200;
		
		.navbar-content {
			.top-bar {
				height: 88rpx;
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				
				.left {
					.back-btn {
						width: 72rpx;
						height: 72rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 50%;
						background-color: $mall-bg-100;
					}
				}
				
				.search-box {
					flex: 0 1 460rpx;
					width: 200rpx;
					height: 64rpx;
					background-color: $mall-bg-100;
					border-radius: $uni-border-radius-sm;
					margin: 0 20rpx;
					display: flex;
					align-items: center;
					padding-left: 14rpx;
					
					.search-input {
						flex: 1;
						height: 100%;
						font-size: 28rpx;
						margin: 0 20rpx;
					}
					
					.clear-btn {
						padding: 10rpx;
					}
				}
			}
			
			.status-tabs {
				height: 80rpx;
				white-space: nowrap;
				padding: 0 20rpx;
				box-sizing: border-box;
				
				/* #ifdef H5 */
				&::-webkit-scrollbar {
					display: none;
					width: 0 !important;
					height: 0 !important;
					-webkit-appearance: none;
					background: transparent;
				}
				/* #endif */
				
				/* #ifdef APP-NVUE */
				scrollbar-width: none;
				/* #endif */
				
				/* #ifndef APP-NVUE */
				scrollbar-width: none; /* Firefox */
				-ms-overflow-style: none; /* IE and Edge */
				/* #endif */
				
				.tab-item {
					display: inline-block;
					padding: 24rpx 40rpx;
					font-size: 28rpx;
					color: $mall-text-200;
					position: relative;
					height: 100%;
					box-sizing: border-box;
					
					&.active {
						color: $mall-primary-100;
						font-weight: bold;
						
						&::after {
							content: '';
							position: absolute;
							bottom: 0;
							left: 40rpx;
							right: 40rpx;
							height: 4rpx;
							background-color: $mall-primary-100;
							border-radius: 2rpx;
						}
					}
				}
			}
		}
	}
	
	.order-scroll {
		position: fixed;
		top: calc(var(--status-bar-height) + 168rpx);
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		
		.order-content {
			padding: 20rpx;
			padding-top: 40rpx;
			
			.skeleton-wrapper {
				background-color: #fff;
				border-radius: $uni-border-radius-sm;
				margin-bottom: 20rpx;
				padding: 30rpx;
			}
			
			.order-item {
				background-color: #fff;
				border-radius: $uni-border-radius-sm;
				margin-bottom: 20rpx;
				padding: 30rpx;
				
				// 骨架屏样式
				&.skeleton {
					.goods-image {
						background-color: $mall-bg-200;
					}
					
					.goods-name, .price-info {
						background-color: $mall-bg-200;
						height: 32rpx;
						margin-bottom: 16rpx;
						border-radius: 4rpx;
					}
					
					.price-info {
						width: 60%;
					}
				}
				
				.order-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;
					
					.order-no {
						font-size: 24rpx;
						color: $mall-text-200;
					}
					
					.order-status {
						font-size: 26rpx;
						color: $mall-primary-100;
						font-weight: bold;
					}
				}
				
				.goods-info {
					display: flex;
					margin-bottom: 20rpx;
					
					.goods-image {
						width: 160rpx;
						height: 160rpx;
						border-radius: $uni-border-radius-sm;
						margin-right: 20rpx;
						background-color: $mall-bg-100;
					}
					
					.goods-detail {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						
						.goods-name {
							font-size: 28rpx;
							color: $mall-text-100;
							line-height: 1.4;
							margin-bottom: 12rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}
						
						.price-info {
							display: flex;
							justify-content: space-between;
							align-items: baseline;
							
							.price {
								font-size: 32rpx;
								color: $mall-primary-100;
								font-weight: bold;
							}
							
							.points {
								font-size: 32rpx;
								color: $mall-accent-100;
								font-weight: bold;
							}
							
							.mixed {
								font-size: 28rpx;
								color: $mall-primary-100;
								font-weight: bold;
							}
							
							.gift {
								font-size: 28rpx;
								color: $mall-accent-100;
								font-weight: bold;
							}
							
							.count {
								font-size: 26rpx;
								color: $mall-text-200;
							}
						}
					}
				}
				
				.order-footer {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-top: 20rpx;
					border-top: 1rpx solid $mall-bg-200;
					
					.time {
						font-size: 24rpx;
						color: $mall-text-200;
					}
					
					.action-btns {
						display: flex;
						gap: 20rpx;
						
						.btn {
							min-width: 140rpx;
							height: 56rpx;
							border-radius: $uni-border-radius-sm;
							font-size: 24rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							margin: 0;
							
							&.cancel-btn {
								background-color: #fff;
								color: $mall-text-200;
								border: 2rpx solid $mall-bg-200;
							}
							
							&.pay-btn {
								background: linear-gradient(135deg, $mall-primary-100, $mall-primary-200);
								color: #fff;
								font-weight: bold;
							}
							
							&.delete-btn {
								background-color: #fff;
								color: $mall-text-200;
								border: 2rpx solid $mall-bg-200;
							}
							
							&:active {
								transform: scale(0.98);
								opacity: 0.9;
							}
						}
					}
				}
			}
			
			.load-more {
				text-align: center;
				padding: 30rpx;
				font-size: 24rpx;
				color: $mall-text-200;
			}
			
			.empty-wrapper {
				position: absolute;
				left: 50%;
				top: 40%;
				transform: translate(-50%, -50%);
				width: 100%;
				padding: 0 30rpx;
				box-sizing: border-box;
				
				.go-shopping {
					width: 200rpx;
					height: 72rpx;
					border-radius: $uni-border-radius-sm;
					font-size: 28rpx;
					color: #fff;
					background: linear-gradient(135deg, $mall-primary-100, $mall-primary-200);
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 40rpx auto 0;
					
					&:active {
						transform: scale(0.98);
						opacity: 0.9;
					}
				}
			}
		}
	}
}
